<template>
    <div>
      <div class="content-header" style="margin-top: 30px">
        <Avatar :src="userInfo.photoUrl" size="60" />
        <span style="margin-left: 25px;font-weight: bold">用户ID:</span>
        <span class="userId" style="margin-left: 5px;font-weight: bold">{{userInfo.userId}}</span>
        <Progress :percent="completion" :stroke-width="20" status="active" text-inside/>
        <span><Icon type="md-information-circle" />资料完成度</span>
      </div><br><hr>
      <div class="content-body" style="margin-top: 25px">
        <Form ref="userInfo" :model="userInfo" :rules="ruleCustom" class="edit-form">
          <FormItem class="userItem" prop="nickname">
            <label for="nickName">昵称:</label>
            <Input v-model=userInfo.nickname id="nickName" class="userInput"/>
          </FormItem>
          <FormItem class="userItem" >
            <label for="gender">性别:</label>
            <Select v-model="userInfo.gender" class="userInput" id="gender">
              <Option v-for="item in genderList" :value="item.value"
                      :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem class="userItem" >
            <label for="birthday">出生日期:</label>
            <DatePicker :value="userInfo.birthday" id="birthday" @on-change="changeDate" :options="validateDate"
                        type="date" placeholder="点击选择日期" class="userInput"></DatePicker>
          </FormItem>
          <FormItem class="userItem"prop="phone" >
            <label for="phone" >联系方式:</label>
            <Input v-model=userInfo.phone  id="phone" class="userInput"/>
          </FormItem>
          <FormItem class="userItem" >
            <label for="school">学校:</label>
            <Input v-model=userInfo.school  id="school"class="userInput" />
          </FormItem>
          <FormItem class="userItem" >
            <label for="signature">个性签名:</label>
            <Input maxlength="100" show-word-limit type="textarea" :autosize="true" v-model=userInfo.signature
                   id="signature" class="userInput"/>
          </FormItem><hr>
          <Button type="primary"
                  @click="handleSave('userInfo')"
                  class="save">
            保存</Button>
        </Form>
      </div>
    </div>
</template>

<script>
  import {getPersonInfo, updateUser} from "../../utils/api/index";
  import Label from "@/components/Manager/Label";
  export default {
    name: "PersonInfo",
    props:{
      "userInfo":Object
    },
    data() {
      const validateNick = (rule,value,callback)=>{
        if (value === '') {
          callback(new Error('用户名不能为空'));
        }
        callback();
      };

      const validatePhone = (rule,value,callback)=>{
        var pattern = new RegExp("^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\\d{8}$")
        if (value!==""&&pattern.test(value)==false) {
          callback(new Error("请输入正确的手机号码格式！"));
        }
        callback();
      };
      return {
        validateDate:{
          disabledDate (date) {
            return date && date.valueOf() >= Date.now()-86400000;
          }
        },
        genderList:[
          { value:"0", label:"未设置"},
          { value:"1", label:"男"},
          { value:"2", label:"女"}],
        completion:0,
        ruleCustom: {
          nickname:[
            {validator:validateNick,trigger:'blur'}
          ],
          phone:[
            {validator:validatePhone,trigger:'blur'}
          ],
        }
      }
    },
    methods:{
      //直接通过v-model绑定的是UTC的时区，会导致参数发送时比实际少一天
      changeDate(item){
        this.userInfo.birthday=item;
      },
      handleSave(name){
        this.$refs[name].validate((valid) => {
          if (valid) {
            //发送更新请求
            updateUser(this.userInfo).then((res)=>{
              if(res.code==200){
                this.$Message.success('保存成功!');
                var updateCompletion=100
                for(var attr in this.userInfo){
                  if(this.userInfo[attr]==null||this.userInfo[attr]===""){
                    updateCompletion=updateCompletion-10
                  }
                }
                if(this.userInfo.gender==0){
                  updateCompletion=updateCompletion-10
                }
                this.completion = updateCompletion
              }else{
                this.$Message.error('保存失败，请重试!');
              }
            })
          } else {
            this.$Message.error('请按要求填写信息!');
          }
        })
      },
    },

    created() {
      if(this.userInfo.gender!=undefined){
        if(this.userInfo.photoUrl==null){
          this.userInfo.photoUrl =require('../../assets/example/defaultAvatar.jpeg')
        }
        //gender为数字时，select组件不回显
        this.userInfo.gender = this.userInfo.gender.toString()
        for(var attr in this.userInfo){
          if(this.userInfo[attr]!=null&&this.userInfo[attr]!==""){
            this.completion+=1;
          }
        }
        //性别未设置
        if(this.userInfo.gender == 0){
          this.completion-=1;
        }
        this.completion=this.completion*10

      }
    },
    //父组件获取用户信息的是异步函数，为了确保在子组件中有数据，监听该属性
    watch:{
      "userInfo":function () {
        if(this.userInfo.photoUrl==null){
          this.userInfo.photoUrl =require('../../assets/example/defaultAvatar.jpeg')
        }
        //gender为数字时，select组件不回显
        this.userInfo.gender = this.userInfo.gender.toString()
        for(var attr in this.userInfo){
          if(this.userInfo[attr]!=null&&this.userInfo[attr]!==""){
            this.completion+=1;
          }
        }
        //性别未设置
        if(this.userInfo.gender == 0){
          this.completion-=1;
        }
        this.completion=this.completion*10
      }
    }
  }
</script>
<style scoped>
  .userItem {
    margin-top: 3px;;
    margin-bottom: 40px;
  }
  label{
    width: 15%;
    display: inline-block;
    margin-left: 25px
  }
  .userInput{
    width: 40%;
    margin-left: 25px;
  }
  .save{
     width:15%;
     margin-left: 80%;
     margin-top: 80px;
     margin-bottom: 80px;
     border-radius: 5px
   }
</style>
